<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动手实践（图片放大特效）</title>
    <style>
        .box{width:1025px;height:750px;border:1px solid #ccc;position:relative}
        .big{width:400px;height:400px;position:absolute;top:0;left:360px;border:1px solid #ccc;overflow:hidden;display:none}
        .mask{width:175px;height:175px;background:rgba(255,255,0,.4);position:absolute;top:0;left:0;cursor:move;display:none}
        .small{position:relative}
        .box img{vertical-align:top}
        #bigBox img{position:absolute}
      </style>
</head>
<body>
    <div class="box" id="box">
        <div id="smallBox" class="small">
          <img src="Desert.jpg">
          <div id="mask" class="mask"></div>
        </div>
        <div id="bigBox" class="big">
          <img id="bigImg" src="Desert.jpg">
        </div>
      </div>
      <script>
        function $(id) {    
           return document.getElementById(id);
        }
       $('smallBox').onmouseover = function() {
          $('mask').style.display = 'block';
          $('bigBox').style.display = 'block';
       };
       $('smallBox').onmouseout = function() {
         $('mask').style.display = 'none';
         $('bigBox').style.display = 'none';
       };
       $('smallBox').onmousemove = function(event) {
         var event = event || window.event;
         var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
         var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
         var boxX = pageX - $('box').offsetLeft;
         var boxY = pageY - $('box').offsetTop;
         var maskX = boxX - $('mask').offsetWidth / 2;
         var maskY = boxY - $('mask').offsetHeight / 2;
         if (maskX < 0) {
           maskX = 0;
         }
         if (maskX > $('smallBox').offsetWidth - $('mask').offsetWidth) {
           maskX = $('smallBox').offsetWidth - $('mask').offsetWidth;
         }
         if (maskY < 0) {
           maskY = 0;
         }
         if (maskY > $('smallBox').offsetHeight - $('mask').offsetHeight) {
           maskY = $('smallBox').offsetHeight - $('mask').offsetHeight;
         }
         $('mask').style.left = maskX + 'px';
         $('mask').style.top = maskY + 'px';
         var bigImgToMove = $('bigImg').offsetWidth - $('bigBox').offsetWidth;
         var maskToMove = $('smallBox').offsetWidth - $('mask').offsetWidth;
         var rate = bigImgToMove / maskToMove;
         $('bigImg').style.left = - rate * maskX + 'px';
         $('bigImg').style.top = - rate * maskY + 'px';
       };
      </script>
      <p><a href="第八章.html">返回上一级</a></p>
</body>
</html>